<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="text-area">
			<view>你好，欢迎进入</view>
			<view class="title">西钻远程智能监控平台</view>
		</view>
		<view class="sb_add" @tap="$u.route('/pages/index/shebei')"><u-image class="sb_image" width="35rpx" mode="widthFix" src="/static/images/camera.png"></u-image>添加摄像头</view>
		<u-collapse :item-style="{margin:'10rpx 30rpx',background:'#F6F6F6',padding: '10rpx 20rpx'}" :accordion="true">
			<u-collapse-item :title="item.bk_name" v-for="(item, index) in itemList" :key="index">
				<u-row gutter="16" justify="start">
					<u-col span="6" v-for="(item2, index2) in item.shebei" @tap="camera(item2)">
						<view class="rowstyle">
							<view class="videobg">
								<u-image width="100rpx" height="100rpx" src="/static/images/play.png"></u-image>
							</view>	
							<view class="videoname">{{item2.device_name}}</view>
						</view>
					</u-col>
				</u-row>
			</u-collapse-item>
		</u-collapse>
		
		<u-button class="bk_add" type="primary" shape="circle" @click="add_bankuai">添加板块</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
			}
		},
		onLoad() {
			this.getBankuai();
			this.checkAccessToken();
		},
		methods: {
			getBankuai(){
				let that = this;
				this.$base.request(this.$api.GetBankuai, 'GET', {}, 1, 1).then(res => {
					that.itemList = res.data;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				})
			},
			checkAccessToken(){
				let that = this;
				this.$base.request(this.$api.GetAccessToken, 'GET', {}, 1, 1).then(res => {
					let oldAccessToken = uni.getStorageSync('accessToken');
					if(oldAccessToken != res.data)
					{
						uni.setStorageSync('accessToken',res.data);
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				})
			},
			camera(item){
				let accessToken = uni.getStorageSync('accessToken');
				/* wx.navigateToMiniProgram({
				  appId: 'wxf2b3a0262975d8c2',
				  path: 'pages/live/live?accessToken=' + accessToken + '&deviceSerial='+item.device_serial+'&channelNo=1',
				  success(res) {
				    // 打开成功
				  }
				}) */
				let url = '/pages/live/live?accessToken=' + accessToken + '&deviceSerial='+ item.device_serial + '&channelNo=1';
				uni.navigateTo({
				  url: url,
				})
			},
			add_bankuai(){
				let that = this;
				uni.showModal({
					title: '添加板块',
					placeholderText:'板块名称',
					editable: true,
					success: function (res) {
						if (res.confirm) {
							var content = that.$u.trim(res.content);
							if(content == '')
							{
								that.$refs.uToast.show({
									title: '名称不能为空！',
									type: 'warning',
								})
								return false;
							}
							var data = {content:content};
							that.$base.request(that.$api.AddBankuai, 'POST', data, 1, 1).then(res => {
								that.$refs.uToast.show({
									title: '添加成功！',
									type: 'success',
								});
								that.getBankuai();
							}).catch(err => {
								uni.showToast({
									title: err.msg,
									icon: 'none'
								});
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		width:100vw;
		height:100vh;
	}
	.content {
	}
	.text-area {
		text-align: left;
		margin:40rpx;
		height:80rpx;
		line-height: 80rpx;
		font-size: 50rpx;
		margin-bottom: 100rpx;
	}
	.title {
		color: #2979ff;
	}
	.bankuai{
		margin:100rpx 30rpx;
	}
	.bkitem{
		margin-bottom: 10rpx;
		padding: 10rpx 20rpx;
	}
	.videobg{
		background-color: #000000;
		height:150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10% 10% 0% 0%;
	}
	.videoname{
		background-color: #FFFFFF;
		height:70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0% 0% 10% 10%;
	}
	.bk_add{
		width:50%;
		position: absolute;
		bottom:8%;
		right:25%;
	}
	.sb_add{
		width:30%;
		position: fixed;
		top:7%;
		right:0;
		background-color: #ECF4FF;
		padding:10rpx;
		border-radius: 50rpx 0% 0% 50rpx;
		display: flex;
		align-items: center;
	}
	.sb_image{
		margin-right:10rpx;
		margin-left:10rpx;
	}
	.rowstyle{
		margin:5rpx 0;
	}
</style>
